<template>
  <el-table
    @row-click="cellClicks"
    :data="tableData"
    style="width: 100%"
    header-row-class-name="header_stock"
    ref="chatContent"
    :max-height="height"
    class="stock_list_table"
    :height="height"
  >
    <el-table-column
      fixed
      :label="$t('quotation.left_list.56hzdc682d00')"
      min-width="120"
      class-name="stock_list_left"
      prop="name"
    >
      <template slot-scope="scope">
        <h2 class="f-cb stock_list_h2">{{ scope.row.name }}</h2>
        <p class="stock_list_p">
          <!-- <span
            :class="
              scope.row.market == 'HKEX'
                ? 'hk'
                : scope.row.market == 'US'
                ? 'us'
                : 'sh'
            "
            >{{ scope.row.market | Market }}</span> -->
            <img
              class="type_icon"
              :src="
                scope.row.market == 'HKEX'
                  ? HKicon
                  : scope.row.market == 'US'
                  ? USicon
                  : scope.row.market == 'SSE'
                  ? SHicon
                  : SZicon
              "
              alt=""/>
          
          {{ scope.row.stockCode || scope.row.symbol }}
        </p>
      </template>
    </el-table-column>
    <!-- 仅融资融券榜单有排序 -->
    <el-table-column
      prop="latestPrice"
      :label="$t('m.latestPrice')"
      min-width="100"
      :sortable="sortList.listType == 4 || sortList.listType == 5"
      :sort-method="sortPrice"
      class-name="stock_list_center"
    >
      <template slot-scope="scope">
        <div
          :class="
            scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
          "
        >
          {{ scope.row.latestPrice | toFixed(scope.row.precision) }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      :label="sortList.title"
      :prop="sortList.type ? sortList.type : 'gain'"
      min-width="100"
      class-name="stock_list_right"
      :sortable="sortList.listType == 4 || sortList.listType == 5"
      :sort-method="sortGain"
    >
      <template slot-scope="scope">
        <h2 v-if="sortList.type">
          {{ (scope.row[sortList.type] * 100).toFixed(2) }}%
        </h2>
        <h2
          v-else
          :class="
            scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
          "
        >
          {{ scope.row.gain > 0 ? "+" : ""
          }}{{ (scope.row.gain * 100).toFixed(2) }}%
        </h2>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["sortList", "stockHeight", "tableData"],
  data() {
    return {
      height: null,
      scroll: 0,
      windowHeight: 0,
      scrollHeight: 0,
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      SHicon: require("@/assets/img/icon_sh.png"),
      SZicon: require("@/assets/img/icon_sz(1).png"),
    };
  },
  mounted() {
    var _this = this;
    this.getHeight();
    $(window).resize(function() {
      _this.getHeight();
    });
    // 通过$refs获取dom元素
    // var box = this.$refs.chatContent.bodyWrapper;
    // box.addEventListener("scroll", this.paperScroll);
  },
  methods: {
    getHeight() {
      if ($(window).width() > 1450) {
        this.height = this.stockHeight;
      } else {
        this.height = 285;
      }
    },
    paperScroll() {
      var _this = this;
      var box = this.$refs.chatContent.bodyWrapper;
      // 滚动距离
      this.scroll = box.scrollTop;
      // 变量windowHeight是可视区的高度
      this.windowHeight = box.clientHeight || box.clientHeight;
      // 变量scrollHeight是滚动条的总高度
      this.scrollHeight = box.scrollHeight || box.scrollHeight;
      if (
        this.scroll + this.windowHeight == this.scrollHeight &&
        this.tableData.length >= 20
      ) {
        _this.getupdata();
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
      }
      //console.log(this.scroll)
    },
    getupdata() {
      this.$emit("scrollBottom");
    },
    // sotrname(column) {
    //   console.log(column)
    //   this.sortFor(column.prop, column.order);
    // },
    sortPrice(obj1, obj2) {
      let val1 = obj1.latestPrice;
      let val2 = obj2.latestPrice;
      let res = val1 - val2;
      return res;
    },
    sortGain(obj1, obj2) {
      let val1 = Number(obj1.gain);
      let val2 = Number(obj2.gain);
      let res = val1 - val2;
      return res;
    },
    cellClicks(row) {
      var StockData = {
        securityType: row.securityType,
        symbol: row.symbol,
        market: row.market
      };
      if(!this.hkActive && !this.shActive && !this.usActive && !this.zixuanActive) {
        // 当任意股票市场的右侧弹框打开存储上上一次的值用于跳到行情页面时回复到原值
        this.$store.dispatch("SetObserveStrock",this.StockDatas)
      }
      // 点击列表中的值打开右侧弹框
      this.$store.dispatch("SetStockData", StockData);
      this.$emit("ListClick", true);
    }
    // sortFor(obj, order) {
    //   console.log(this.sortList,"数组")
    //   // 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
    //   if (order == "ascending") {
    //     this.sortList.submit[obj] = this.sortList[obj][1];
    //   } else if (order == "descending") {
    //     this.sortList.submit[obj] = this.sortList[obj][2];
    //   } else {
    //     this.sortList.submit[obj] = this.sortList[obj][0];
    //   }
    // }
  },
  computed: {
    StockDatas() {
      return this.$store.state.index.StockData;
    },
    hkActive() {
      return this.$store.state.index.hkActive;
    },
    shActive() {
      return this.$store.state.index.shActive;
    },
    usActive() {
      return this.$store.state.index.usActive;
    },
    zixuanActive() {
      return this.$store.state.index.zixuanActive;
    },

  },
  watch: {
    stockHeight(val) {
      this.height = val;
    }
  }
};
</script>
<style lang="less">
.stock_list_table {
  // border: 1px solid @LightBorderLine;
   .el-table__header {
    .header_stock {
      height: 40px;
    }
    th {
      border-bottom: 1px solid @LightBorderLine;
    }
    .cell {
      font-size: 12px;
      color: @Dark_gray !important;
      font-weight: normal;
    }
    .stock_list_right {
      .cell {
        text-align: left;
      }
    }
    .stock_list_center {
      .cell {
        text-align: left;
      }
    }
    .stock_list_left {
      background: @deepBg;
    }
  }
   .el-table__body {
    cursor: pointer;
    .stock_list_left {
      background: @deepBg;
      padding-bottom: 0;
      .stock_list_h2 {
        position: relative;
        font-size: 12px;
        color: @fff;
        line-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 4px;
        padding: 0;

        b {
          display: block;
          width: 100%;
          font-weight: normal;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 22px;
        }
      }
      .stock_list_p {
        font-size: 12px;
        color: @fff;
        margin-bottom: 4px;
        line-height: 16px;
        .type_icon {
          height: 13px;
          margin-right: 5px;
        }
        .warn_icon {
          width: 16px;
        }
      }
    }
    .cell {
      h2{
        background: none;
      }
    }
    .stock_list_center {
      .cell {
        color: @fff;
        font-size: 14px;
        text-align: left;
      }
    }
    .stock_list_right {
      .cell {
        text-align: left;
        h2 {
          font-size: 14px;
          color: @fff;
        }
      }
    }
    td {
      border-bottom: 1px solid @LightBorderLine;
    }
  }
  .el-table__fixed{
    bottom:8px !important;
  }
   .el-table__fixed::before {
    display: none;
  }

  .el-loading-mask {
    background: none;
  }
  
}
</style>